<template>
	<view class="recharge">
		<view class="recharge_header">
			<!-- <image src="/static/recharge_header.png" mode=""></image> -->
			<view class="title">
				我的余额
			</view>
			<view class="money">
				<text>￥</text>{{fenToYuan(userData.wallet)}}
			</view>
		</view>
		<view class="recharge_list">
			<view v-for="(item,index) in rechargeList" @click="setRechargeIndex(index)" :key="item.value"
				class="recharge_item" :class="{active:rechargeIndex == index}">
				<view class="value">{{fenToYuan(item.value)}} <text>元</text></view>
				<view class="bonus">赠送:{{fenToYuan(item.bonus)}}元</view>
			</view>
		</view>
		<view class="announcement">
			<view class="announcement_title">注意事项</view>
			<view class="announcement_content">{{announcement}}</view>
		</view>

		<view class="recharge_btn" @click="rechargeFn">
			充值
		</view>
	</view>
</template>

<script>
	import util from "@/utils/util.js";
	import {
		recharge,
		queryReChargeActivities,
		getUserInfoFn
	} from "@/request/api.js";
	import MyMinix from '@/utils/minix/minix.js';
	export default {
		mixins: [MyMinix],
		data() {
			return {
				rechargeIndex: 0,
				rechargeList: [],
				announcement: '',
				userData:{
					wallet:0
				}
			};
		},
		onShow() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getUserIn();
			this.queryReChargeActivitiesFn();
		},
		methods: {
			//获取用户信息
			async getUserIn() {
				let that = this;
				let res = await getUserInfoFn({
					method: "GET",
					data: {
						userId: util.getUserId()
					},
				})
				if (res.code == 200) {
					that.userData = res.result
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
				console.log(res, 'resreskk')
			},
			// 设置充值金额
			setRechargeIndex(index) {
				this.rechargeIndex = index;
			},
			// 获取充值活动
			async queryReChargeActivitiesFn() {
				let res = await queryReChargeActivities({
					method: "GET",
					data: {}
				})
				uni.hideLoading()
				if (res.code == 200) {
					let {
						announcement,
						items
					} = res.result;
					this.announcement = announcement;
					this.rechargeList = items.map(item => ({
						value: item[0],
						bonus: item[1]
					}))
				}
			},

			// 充值
			async rechargeFn() {
				uni.showLoading({
					title:'充值中...'
				})
				let {
					value,
					bonus
				} = this.rechargeList[this.rechargeIndex];
				let res = await recharge({
					method: "POST",
					data: {
						value,
						bonus
					}
				})
				if(res.code == 200){
					let pay = await util.payMent(res.result)
					if (pay.errMsg == 'requestPayment:ok') {
						uni.showToast({
							title: "支付成功!",
							icon: 'success',
							success() {
								
							}
						})
					
					} else if (pay.errMsg == 'requestPayment:fail cancel') {
						uni.showToast({
							title: "取消支付!",
							icon: 'none',
							success() {
							
								
							}
						})
					}
					
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		background: linear-gradient(to bottom, #ec6025 6.52%, #fff 58.65%);
		&_header {
			// background: #35AA4C;
			background-image: url('/static/recharge_header.png');
			background-size: 100% 100%;
			width:690rpx;
			height: 170rpx;
			padding: 30rpx 0;
			margin:0 auto;
			color: #fff;
			@include flexs(space-around, center);
			flex-direction: column;
			&>image{
				display: block;
				width:100%;
				height:100%;
			}
			.title {
				font-size: 40rpx;
			}

			.money {
				font-size: 64rpx;
				text {
					font-size: 48rpx;
				}
			}
		}

		&_list {
			margin: 50rpx 30rpx 0;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			flex-wrap: wrap;

			.recharge_item {
				@include flexs(space-between, center);
				flex-direction: column;
				width: 305rpx;
				backgounr: #fff;
				border-radius: 20rpx;
				padding: 20rpx 10rpx;
				margin: 0 30rpx 30rpx 0;
				background:#F6F6F6;
				border: 1rpx solid #ccc;
				box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, .05);

				&.active {
					background: #FFECE4;
					color: #EB5B1E;
					border-color: #ED662D;
				}

				&:nth-child(2n) {
					margin-right: 0;
				}

				.value {
					font-size: 32rpx;
					margin-bottom: 10rpx;

					text {
						font-size: 28rpx;
					}
				}

				.bonus {
					font-size: 28rpx;
				}
			}
		}

		.announcement {
			margin: 20rpx 30rpx 30rpx;

			&_title {
				font-size: 28rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			&_content {
				font-size: 24rpx;
				color:#666666;
				line-height: 40rpx;
			}
		}

		&_btn {
			background-color: #EB5B1E;
			color: #fff;
			border-radius: 52rpx;
			font-size: 28rpx;
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 60rpx;
			text-align: center;
			display: block;
			margin: 100rpx auto 30rpx;
		}
	}
</style>